<template>
  <div class>
    <naviHeader></naviHeader>

    <div>
      <!-- <div class="select-container">
        <input type="text" placeholder="搜索全部课程">
      </div> -->

      <div class="container">
        <div class="category">
          <div
            class="item"
            v-bind:class="[selectIndex === index ? 'border-left': '']"
            v-for="(item, index) in category"
            :key="index"
            v-on:click="getCourse(index)"
          >{{item.name}}</div>
        </div>

        <div class="list">
          <!-- <div v-show="list[selectIndex].cover">
            <img class="cover" v-bind:src="list[selectIndex].cover" alt="">
          </div>-->
          <div v-for="item in list" :key="item.index">
            <router-link :to="{name: 'course', params: {id: item.id}}">
              <div class="item">
                <img class="img" v-bind:src="imgBaseUrl + item.coverUrl" alt>
                <div class="name">{{item.name}}</div>
              </div>
            </router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import naviHeader from "src/components/naviHeader/naviHeader";
import {
  getCategory,
  getColumn,
  getCourseList,
  getCategoryCourseList
} from "../../service/getData";
import { imgBaseUrl } from "../../config/env";

export default {
  data() {
    return {
      selectIndex: 0,
      imgBaseUrl: imgBaseUrl,
      category: [
        {
          img:
            "http://img4.xiazaizhijia.com/walls/20160229/1440x900_5520740209ce39b.jpg",
          name: "用户手册",
          coverUrl: "/download/v1/1547540711719.png",
          createTime: "2019-01-15T08:25:12.000+0000",
          id: "402880e868505f100168509d494b0000",
          name: "早教",
          updateTime: null
        }
      ],
      list: []
    };
  },

  mounted() {
    var index = this.$route.params.index;
    console.log(index);
    this.init(index);
  },
  components: {
    naviHeader
  },

  computed: {},
  methods: {
    init: function(index) {
      this.selectIndex = index;

      // 分类
      getCategory(this.$store.userToken).then(res => {
        this.category = res;

        getCategoryCourseList(
          this.$store.userToken,
          res[index].id
        ).then(res => {
          this.list = res.content;
        });
      });
    },
    getCourse: function(index) {
      this.selectIndex = index;
      getCategoryCourseList(
        this.$store.userToken,
        this.category[index].id
      ).then(res => {
        this.list = res.content;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../style/mixin";

.select-container {
  width: 100%;
  height: 1.6rem;
  line-height: 1.6rem;
  background: #fff;

  input {
    height: 0.8rem;
    width: 90%;
    margin-left: 0.2rem;
    border-radius: 10px;
    border: 2px solid #f1f1f1;
    text-align: center;
  }
}

.container {
  @include fj(sapce-between);
  width: 7.5rem;

  .category {
    width: 2.2rem;

    .item {
      padding: 0.1rem;
      text-align: center;
      height: 1rem;
      line-height: 1rem;
      background: #f1f1f1;
    }

    .border-left {
      border-left: 2px solid #16e08f;
      background: #fff;
    }
  }

  .list {
    width: 5.3rem;
    background: #fff;

    .cover {
      width: 5rem;
      padding: 0.1rem;
      height: 3.6rem;
      border-radius: 10px;
    }

    .item {
      float: left;
      padding: 0.1rem;
      text-align: center;
      // width: 2.4rem;

      .img {
        width: 2.4rem;
        height: 2rem;
        border-radius: 10px;
      }

      .name{
        width: 2.4rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>
